import { Panel, LayerLink, Icon as CustomIcon } from 'comps/common';
import { Select, Form, Input, Button, Table, Popconfirm, Icon } from 'antd';
import AssignMachineModal from '../components/assign-machine-modal';
import * as React from 'react';

const FormItem = Form.Item;
const Option = Select.Option;

class MachineSearchForm extends React.Component {

  onSearchSubmit(evt) {
    evt.preventDefault();
    const query = this.props.form.getFieldsValue();
    if (query.sourceId === 'ALL') {
      query.sourceId = null
    }
    this.props.onSearchSubmit(query, this.props.companyId);
  }

  render() {
    const { getFieldProps } = this.props.form;

    return (
      <Form className='search-form' inline ref='searchForm' onSubmit={::this.onSearchSubmit}>
        <FormItem label='机器来源：'>
          <Select {...getFieldProps('sourceId', { initialValue: 'ALL' })} defaultValue='ALL'
            style={{ width: '150px' }}
          >
            <Option value='ALL'>ALL</Option>
            {this.props.machineSources.map(({ id, name }) => <Option key={id} value={id}>{name}</Option>)}
          </Select>
        </FormItem>
        <FormItem>
          <Input {...getFieldProps('key')} style={{ width: '300px' }} placeholder='输入 IP 、机器名进行查询，留空则搜索所有'/>
        </FormItem>
        <Button htmlType='submit' type='primary'><Icon type='search'/>搜索</Button>
      </Form>
    );
  }
}

MachineSearchForm = Form.create()(MachineSearchForm);

class MachineSearchList extends React.Component {

  render() {
    const { isFetching, onInitialize, onProviding, onDeleting, onFormSubmit, onMachineAssign, companyId,
      machineSources, machines = [], MachineSourceManage, NewMachine, MachineLog } = this.props;

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
      }, {
        title: 'IP',
        dataIndex: 'ip',
        key: 'ip'
      }, {
        title: '端口号',
        dataIndex: 'port',
        key: 'port',
        render: (text) => (text || 22)
      }, {
        title: '机器名',
        dataIndex: 'name',
        key: 'name'
      }, {
        title: '机器来源',
        dataIndex: 'machineSourceName',
        key: 'machineSourceName'
      }, {
        title: '分配企业',
        dataIndex: 'companyName',
        key: 'companyName'
      }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render(status) {
          return {
            NEW: '未初始化',
            INITIALIZING: <span className='color-primary'><Icon type='loading'/> 初始化中</span>,
            INIT_FAILED: <span className='color-warning'><Icon type='exclamation'/> 初始化失败</span>,
            READY: <span className='color-success'><Icon type='check'/> 准备就绪</span>,
            DISCONNECT: <span className='color-danger'><Icon type='question'/> 断开</span>
          }[status];
        }
      }, {
        title: '操作',
        key: 'operation',
        render: (t, record) => {
          return {
            NEW: <span>
              <Button type='primary' onClick={onProviding.bind(this, record)}>初始化</Button>&nbsp;&nbsp;
              <Popconfirm title='确定要删除这台机器吗?' onConfirm={onDeleting.bind(this, record)}>
                <a href='#'>删除</a>
              </Popconfirm>
            </span>,
            INITIALIZING: <span>
              <LayerLink title={`装备日志 (${record.id}-provision)`} component={ MachineLog }
                data={{ id: record.id, namespace: 'provision' }}>查看日志</LayerLink>
            </span>,
            INIT_FAILED: <span>
              <Button type='primary' onClick={onProviding.bind(this, record)}>重试</Button>&nbsp;&nbsp;
              <LayerLink title={`装备日志 (${record.id}-provision)`} component={ MachineLog }
                data={{ id: record.id, namespace: 'provision' }}>查看日志</LayerLink>
            </span>,
            READY: <span>
              {companyId? null: <Button type='primary' onClick={() => this.refs.assignMachineModal.show(record.id)}>分配机器</Button>}&nbsp;&nbsp;
              </span>,
            DISCONNECT: <span>
              <Button type='primary' onClick={onInitialize.bind(this, record)}>尝试重连</Button>&nbsp;&nbsp;
              <LayerLink title={`装备日志 (${record.id}-provision)`} component={ MachineLog }
                data={{ id: record.id, namespace: 'initialize' }}>查看日志</LayerLink>&nbsp;&nbsp;
              <Popconfirm title='确定要删除这台机器吗?' onConfirm={onDeleting.bind(this, record)}>
                <a href='#'>删除</a>
              </Popconfirm>
            </span>
          }[record.status];
        }
      }
    ];

    return (
      <Panel>
        <AssignMachineModal ref='assignMachineModal' onMachineAssign={onMachineAssign}/>
        <MachineSearchForm companyId={ companyId } onSearchSubmit={onFormSubmit} machineSources={machineSources}/>
        <div className='btn-line' style={{ marginBottom: '20px' }}>
          <LayerLink className='ant-btn ant-btn-ghost' data={{ companyId }}
            component={MachineSourceManage}
          ><CustomIcon type='unixfuwuqi'/>
            机器来源管理</LayerLink>
          <LayerLink className='ant-btn ant-btn-primary' data={{ companyId }}
            component={NewMachine}
          >
            <CustomIcon type='hdd'/> 添加新机器</LayerLink>
        </div>
        <div className='machine-search-list'>
          <Table dataSource={machines} columns={columns} loading={isFetching} rowKey={it => it.id}/>
        </div>
      </Panel>
    );
  }
}

export default MachineSearchList;
